<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        title="分类级别"
        ref="proTableRef"
        row-key="id"
        :show-pagination="pageable"
        :columns="columns"
        :expand-row-keys="expandKeys"
        highlight-current-row
        :request-api="loadData">
        <template #tableHeader>
          <ElButton type="primary" :icon="CirclePlus" @click="onAddClicked()">新增</ElButton>
          <ElButton type="primary" :icon="Expand" @click="onExpandClicked">展开全部</ElButton>
          <ElButton type="primary" :icon="Fold" @click="onFoldClicked">收起全部</ElButton>
        </template>
        <template #operation="scope">
          <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
          <ElButton type="success" link :icon="Plus" @click="onAddClicked(scope.row)">新增</ElButton>
          <ElButton type="warning" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
          <ElButton type="danger" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
        </template>
      </ProTable>
    </div>
    <TypeLevelForm ref="formRef" @success="refresh" />
  </div>
</template>

<script setup lang="ts" name="ZLTypeLevel">
import { ref, computed } from 'vue'
import { CirclePlus, Fold, Expand, View, Plus, EditPen, Delete } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { treeTableList, removeTypeLevel } from '@api/tby/summarize/typeLevel/index'
import TypeLevelForm from './typeLevel-form.vue'
import { FormType } from '@/enums'
import { ElMessage, ElMessageBox } from 'element-plus'

const proTableRef = ref<ProTableInstance>()
const expandSet = ref(new Set())
// 可分页状态
const pageable = ref(false)
// 表格配置项
const columns: ColumnProps[] = [
  { prop: 'levelName', label: '级别名称', align: 'left' },
  { prop: 'levelNames', label: '级别集合名称', align: 'left' },
  { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]

// 展开行数组
const expandKeys = computed(() => {
  return Array.from(expandSet.value)
})

// 加载数据
function loadData() {
  return treeTableList()
}

// 展开
function onExpandClicked() {
  const data = proTableRef.value?.tableData
  expandSet.value = new Set()
  if (data) {
    toggleExpand(data)
  }
}

// 展开方法递归
function toggleExpand(data: any[]) {
  data.forEach(item => {
    expandSet.value.add(item.id + '')
    if (item.children) {
      toggleExpand(item.children)
    }
  })
}

// 收起
function onFoldClicked() {
  expandSet.value = new Set()
}

function refresh() {
  proTableRef.value?.getTableList()
}

const formRef = ref<InstanceType<typeof TypeLevelForm> | null>(null)

// 添加
const onAddClicked = (row?: any) => {
  let id = row ? row.id : 0
  let level = row ? row.level : 0
  let levelName = row ? row.levelName : ''

  formRef.value?.open(FormType.ADD, id, level, undefined, levelName)
}

// 查看用户
const onViewClicked = (row: any) => {
  formRef.value?.open(FormType.VIEW, row.parentId, row.level, row.id, row.levelName)
}

const onEditClicked = (row: any) => {
  formRef.value?.open(FormType.EDIT, row.parentId, row.level, row.id, row.levelName)
}

const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('是否删除数据?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    removeTypeLevel(row.id).then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      proTableRef.value?.getTableList()
    })
  })
}
</script>
